<template>
  <Dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="1600px"
    :scroll="true"
    maxHeight="500px"
  >
    <el-descriptions class="margin-top" title="患者随访信息" :column="4" :size="size" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <user />
            </el-icon> -->
            姓名
          </div>
        </template>
        {{ formData.patientName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <male />
            </el-icon> -->
            性别
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.GENDER, formData.gender) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <timer />
            </el-icon> -->
            年龄
          </div>
        </template>
        {{ formData.age }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <iphone />
            </el-icon> -->
            所属机构
          </div>
        </template>
        {{ formData.managementOrgName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <postcard />
            </el-icon> -->
            证件号码
          </div>
        </template>
        {{ formData.idNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <userFilled />
            </el-icon> -->
            录入日期
          </div>
        </template>
        {{ formatDate(formData.entryDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <userFilled />
            </el-icon> -->
            随访日期
          </div>
        </template>
        {{ formatDate(formData.followUpDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <iphone />
            </el-icon> -->
            随访形式
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.RANDOM_ACCESS_TYPE, formData.followUpMode) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <location />
            </el-icon> -->
            随访访视对象
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.VISIT_TARGET, formData.followUpTarget) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            面访形式
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.INTERVIEW_FORM, formData.faceToFaceMode) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            目前诊断类别
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.CURRENT_DIAGNOSIS_CATEGORY, formData.currentDiagnosisCategory) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            当前管理单位分库状态
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.SUB_LIBRARY_STATUS, formData.currentOrgSubDbStatus) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <user />
            </el-icon> -->
            失访原因
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.LOST_REASON, formData.lostContactReason) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            是否死亡
          </div>
        </template>
        <el-tag v-if="formData.isDeceased" type="danger" size="small">是</el-tag>
        <el-tag v-if="!formData.isDeceased" size="small">否</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            死亡日期
          </div>
        </template>
        {{ formatDate(formData.dateOfDeath, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            自知力
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.INSIGHT, formData.insight) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            睡眠情况
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.STATUS, formData.sleepCondition) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            饮食情况
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.STATUS, formData.eatingCondition) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            个人生活料理
          </div>
        </template>
        {{  getDictLabel(DICT_TYPE.STATUS, formData.selfCare) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            家务劳动
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.STATUS, formData.householdTasks) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <tickets />
            </el-icon> -->
            生产劳动及工作
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.STATUS, formData.workStatus) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            学习能力
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.STATUS, formData.learningAbility) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            社会人际交往
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.STATUS, formData.socialInteraction) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            危险行为有无
          </div>
        </template>
        <el-tag v-if="formData.dangerousBehaviorsFlag == '1'" size="small">无</el-tag>
        <el-tag v-if="formData.dangerousBehaviorsFlag == '2'" size="small" type="danger">有</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            轻度滋事次数
          </div>
        </template>
        {{ formData.minorNuisanceCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            肇事次数
          </div>
        </template>
        {{ formData.incidentCount }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            肇祸次数
          </div>
        </template>
        {{ formData.harmfulIncidentCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            其他危险行为次数
          </div>
        </template>
        {{ formData.otherDangerousBehaviorCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            自杀未遂
          </div>
        </template>
        {{ formData.suicideAttemptCount }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            自伤次数
          </div>
        </template>
        {{ formData.selfInjuryCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            两次随访期间关锁情况
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.LOCK_STATUS, formData.seclusionStatus) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            两次随访期间住院情况
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.HOSPITALIZATION_BETWEEN_VISITS, formData.hospitalizationStatusBetween) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            末次出院时间
          </div>
        </template>
        {{ formatDate(formData.lastDischargeDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            危险性评估
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.RISK_ASSESSMENT, formData.riskAssessment) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            目前症状有无
          </div>
        </template>
        <el-tag v-if="formData.currentSymptoms == '1'" size="small" type="danger">有</el-tag>
        <el-tag v-if="formData.currentSymptoms == '2'" size="small">无</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            目前症状
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.SYMPTOMS, formData.currentSymptomsDetail) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            服药依从性
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.MEDICATION_ADHERENCE, formData.medicationAdherence) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            药物不良反应
          </div>
        </template>
        {{formData.adverseDrugReactions}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            药物不良反应类型
          </div>
        </template>
        {{formData.adverseDrugReactionsType}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            严重躯体疾病有无
          </div>
        </template>
        <el-tag v-if="formData.hasSeverePhysicalDisease === '2'" size="small" type="success"
          >无</el-tag
        >
        <el-tag v-if="formData.hasSeverePhysicalDisease === '1'" size="small" type="danger"
          >有</el-tag
        >
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            严重躯体疾病请注明
          </div>
        </template>
        {{ formData.severePhysicalDiseaseRemark }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            医生
          </div>
        </template>
        {{ formData.doctor }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            医院
          </div>
        </template>
        {{ formData.hospital }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            不用药主要原因
          </div>
        </template>
        {{ formData.reasonNotTakingMedication }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            治疗效果
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.TREATMENT_EFFECT, formData.treatmentEffect) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            是否已转诊
          </div>
        </template>
        <el-tag v-if="formData.referralFlag == '1'" size="small" type="danger">是</el-tag>
        <el-tag v-if="formData.referralFlag == '2'" size="small">否</el-tag>
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            建议转诊原因
          </div>
        </template>
        {{ formData.referralReason }}
      </el-descriptions-item>

      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            转诊至机构及科室
          </div>
        </template>
        {{ formData.referralDestination }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            康复措施
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.REHABILITATION_MEASURES, formData.rehabilitationMeasures) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            本次随访分类
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.FOLLOWUP_DISEASE_CLASSIFICATION, formData.currentFollowupType) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            是否进行个案管理
          </div>
        </template>
        <el-tag v-if="formData.caseManagementFlag === '1'" size="small" type="success">是</el-tag>
        <el-tag v-if="formData.caseManagementFlag === '2'" size="small" type="danger">否</el-tag>
      </el-descriptions-item>
      <el-descriptions-item :span="3">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            应急处置
          </div>
        </template>
        {{ formData.emergencyHandling }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            下次随访日期
          </div>
        </template>
        {{ formatDate(formData.nextFollowUpDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item :span="4">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            记录纸
          </div>
        </template>
        {{ formData.recordSheet }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import * as RandomAccessApi from '@/api/patient/randomAccess'
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
  Female,
  Male,
  Timer,
  Postcard,
  Calendar,
  UserFilled
} from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'
defineOptions({ name: 'RandomAccessDetail' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formData = ref({})
/** 打开弹窗 */
const open = async (id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.detail')
  // 修改时，设置数据
  if (id) {
    formData.value = await RandomAccessApi.getRandomAccessDetail(id)
  }
}

const size = ref<ComponentSize>('default')

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px'
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default
  }
})

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style lang="scss" scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
